<template>
  <v-container>
    <v-row>
      <h1 class="font-weight-light">
        Welcome, {{user | nameOfUser}}
        <v-chip
          class="ma-2"
          color="primary"
          v-if="user.userType"
        >
          {{userType}}
        </v-chip>
      </h1>
    </v-row>
    <v-row>
      <v-col sm="12" md="8">
        <v-form>
          <v-card>
            <v-card-title>My profile</v-card-title>
            <v-card-text v-if="userInfo !== null">
              <v-text-field
                      label="Username" name="username"
                      prepend-icon="mdi-account"
                      type="text" disabled
                      autocomplete="off"
                      v-model="userInfo.username"
              ></v-text-field>
              <v-text-field
                      label="Password (Leave empty if unchanged)"
                      name="password"
                      prepend-icon="mdi-lock"
                      type="password"
                      v-model="userInfo.password"
              ></v-text-field>
              <v-row>
                <v-col sm="3">
                  <v-text-field
                          label="Age" name="age"
                          prepend-icon="mdi-account"
                          type="number"
                          v-model="userInfo.age"
                  ></v-text-field>
                </v-col>
                <v-col sm="9">
                  <v-radio-group row label="Gender" v-model="userInfo.sex">
                    <v-radio label="M" :value="1"></v-radio>
                    <v-radio label="F" :value="2"></v-radio>
                    <v-radio label="Unknown" :value="0"></v-radio>
                  </v-radio-group>
                </v-col>
              </v-row>
              <v-text-field
                      label="Nickname" name="nickname"
                      prepend-icon="mdi-account"
                      type="text"
                      autocomplete="off"
                      v-model="userInfo.nickname"
              ></v-text-field>
              <v-text-field
                      label="Real Name" name="real-name"
                      prepend-icon="mdi-account"
                      type="text"
                      autocomplete="off"
                      v-model="userInfo.realName"
              ></v-text-field>
              <v-text-field
                      label="Mobile" name="mobile"
                      prepend-icon="mdi-phone"
                      type="tel"
                      autocomplete="off"
                      v-model="userInfo.mobile"
              ></v-text-field>
              <v-text-field
                      label="Address" name="address"
                      prepend-icon="mdi-home"
                      type="text"
                      autocomplete="off"
                      v-model="userInfo.address"
              ></v-text-field>
              <v-text-field
                      label="Avatar" name="avatar"
                      prepend-icon="mdi-account"
                      type="text"
                      autocomplete="off"
                      v-model="userInfo.avatar"
              ></v-text-field>
              <v-switch
                      label="Admin"
                      v-model="userInfo.admin"
                      disabled
              ></v-switch>
            </v-card-text>
            <v-card-actions>
              <v-spacer/>
              <v-btn text @click="handleSave">Save</v-btn>
            </v-card-actions>
          </v-card>
        </v-form>
      </v-col>
      <v-col sm="12" md="4">
        <v-card>
          <v-list-item three-line>
            <v-list-item-content>
              <div class="overline mb-4">User</div>
              <v-list-item-title class="headline mb-1">
                {{user | nameOfUser}}
              </v-list-item-title>
           </v-list-item-content>

            <v-list-item-avatar
              tile
              size="80"
              color="grey"
            >
              <v-img v-if="user.avatar" :src="user.avatar"></v-img>
            </v-list-item-avatar>
          </v-list-item>

        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  import {updateUser} from "../api/users";

  export default {
    name: 'home',
    data: () => ({
      userInfo: {
        id: null,
        username: null,
        password: null,
        age: null,
        sex: null,
        nickname: null,
        realName: null,
        mobile: null,
        address: null,
        admin: false,
        avatar: null,
        registerTime: null,
        updateTime: null,
        userType: null,
      },
    }),
    computed: {
      token() {
        return this.$store.state.user.token;
      },
      user() {
        return this.$store.getters.user;
      },
      userType() {
        return this.$store.getters.user.admin?'Admin':'Member';
      }
    },
    methods: {
      handleSave() {
        // console.log(this.userInfo);
        updateUser(this.userInfo).subscribe(res => {
          if (res.data) {
            this.$toasted.info('Profile saved');
            if (this.userInfo.password) {
              this.$store.dispatch('user/logout').then(() => {
                this.$toasted.info('You have to re-login since you have changed your password.');
                this.$router.push('/login');
              })
            }
            else this.$store.commit('user/set_user', res.data);
          }
          else {
            this.$toasted.error('No response');
          }
        }, err => {
          this.$toasted.error(err);
        })
      }
    },
    created() {
      this.$store.dispatch('user/getUser').then(res => {
        this.userInfo = Object.assign({}, res);
      });
    }
  };
</script>
